<template >
  <Editor id="tinymce"
          
          v-bind:value="value"
          v-on:input="EmitInput"
          :init='option'></Editor>
</template>
<script>
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons';
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/preview";

export default {
  name: 'tinymceEditor',
  components: {
    Editor,
  },
  props: {
    init: Object,
    value:String,
  },

  data () {
    return {
      // content: this.value,
      initOption: {
        selector: "#tinymce", //tinymce的id
        language_url: "/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
        // content_css: '/tinymce/skins/content/document/content.css',
        height: 500,
        content_style: "p {margin: 5px 0;}",//内容样式
        plugins: "image link code table lists wordcount", //引入插件
        toolbar: ["fontselect fontsizeselect | lineheight forecolor backcolor bold italic underline strikethrough subscript superscript removeformat | alignleft aligncenter alignright alignjustify |numlist bullist | h1 h2 h3 formatselect |  cut  copy paste undo redo  | | table link image  ",

        ], //工具栏
        contextmenu: "undo redo | cut copy paste pastetext | selectall table", // 富文本右键菜单
        branding: false,
        // tinymce插入图片支持转base64操作
        images_upload_handler: function (blobInfo, success, failure) {
          let blob = blobInfo.blob()
          if (blob.size > 1024 * 1024 * 2) {
            failure("请提交2MB以下的图片")
            return
          }
          var reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onload = function () {
            success(this.result);
          };
        },
      },
    };
  },
  mounted () {
    tinymce.init({});
  },
  watch: {
    // content (newValue) {
    //   this.$emit("input", newValue);
    // }
  },
  computed: {
    option: function () {
      return Object.assign({}, this.initOption, this.init);
    },

  },
  methods: {
    EmitInput(value){
      // console.log("EmitInput")
      this.$emit('input', value)
    }
  }
};
</script>

<style scoped>
.ImageItem {
    height: 100px;
    width: 100px;
    border: 1px #ebeef5 solid;
    border-radius: 10px;
    overflow: hidden;
}
.VideoItem {
    height: 150px;
    width: 250px;
    border: 1px #ebeef5 solid;
    border-radius: 10px;
    overflow: hidden;
}
.descriptionsItemLabel {
    background: red;
}
.ContentDiv {
}
</style>